import React from 'react'
// 引入Routes和Route路由 还有Navigate重定向路由
import { Routes, Route, Navigate } from "react-router-dom"
// 引入useRoutes组件方法,他可以用于根据路由表,动态创建Routes和Route


export default function App() {
    /* 
      Navigate组件：
        当不管什么情况下接收了这个 Navigate组件,则路由会按照这个组件的to的地址重新执行路由跳转

        路径是 * 代表所有路径，先匹配非*的所有的路径 如果匹配不到，则执行*代表的路由组件
    */
  return (
    <div className='outer'>
      {/* 所有的Route路由都写在Routes根组件中,包裹在里面,这个组件是react中的,上面引入之后可以直接使用 */}
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/main" element={<Main />} >
            {/* 后代路由也写在Main里面,后面进行二级跳转 */}
            <Route path="/main/home" element={<Home />} />
            <Route path="/main/about" element={<About />} />
        </Route>
        <Route path="/" element={<Navigate to='Login' />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}


// 配置路由三个步骤:
// 1.下载包
// 2.引入BrowserRouter包裹住整个App文件,也就包裹住了所有的子组件
// 3.书写路由配置,在想要展示路由的地方书写路由配置信息